Ext.define('DutyList.calendar.CalendarPanel', {
    extend: 'Ext.panel.Panel',
    alias: 'widget.calendarpanel',
    
    requires: [
        'Ext.layout.container.Card',
        'DutyList.calendar.view.Month',
        'DutyList.calendar.form.field.DateRange'
    ],

    showNavBar: true,

    todayText: 'Today',

    showTodayText: true,

    showTime: true,

    monthText: 'Month',

    // private
    layoutConfig: {
        deferredRender: false
    },

    // private property
    Date: new Date,

    // private
    initComponent: function() {
        this.tbar = {
            cls: 'ext-cal-toolbar',
            border: false,
            items: ['->',{
                id:         this.id + '-tb-prev',
                handler:    this.onPrevClick,
                scope:      this,
                iconCls: 'x-tbar-page-prev'
            }]
        };

        this.viewCount = 0;

        this.tbar.items.push({
            id:         this.id + '-tb-next',
            handler:    this.onNextClick,
            scope:      this,
            iconCls: 'x-tbar-page-next'
        });
        this.tbar.items.push('->');

        var idx = this.viewCount - 1;
        //****Choos show parametr
        this.activeItem =0;

        if (this.showNavBar === false) {
            delete this.tbar;
            this.addCls('x-calendar-nonav');
        }

        this.callParent();

        this.addEvents({

            eventadd: true,

            eventupdate: true,

            eventdelete: true,

            eventcancel: true,

            viewchange: true

            //
            // NOTE: CalendarPanel also relays the following events from contained views as if they originated from this:
            //
            /**
             * @event eventsrendered
             * Fires after events are finished rendering in the view
             * @param {DutyList.calendar.CalendarPanel} this
             */
            /**
             * @event eventclick
             * Fires after the user clicks on an event element
             * @param {DutyList.calendar.CalendarPanel} this
             * @param {DutyList.calendar.EventRecord} rec The {@link DutyList.calendar.EventRecord record} for the event that was clicked on
             * @param {HTMLNode} el The DOM node that was clicked on
             */
            /**
             * @event eventover
             * Fires anytime the mouse is over an event element
             * @param {DutyList.calendar.CalendarPanel} this
             * @param {DutyList.calendar.EventRecord} rec The {@link DutyList.calendar.EventRecord record} for the event that the cursor is over
             * @param {HTMLNode} el The DOM node that is being moused over
             */
            /**
             * @event eventout
             * Fires anytime the mouse exits an event element
             * @param {DutyList.calendar.CalendarPanel} this
             * @param {DutyList.calendar.EventRecord} rec The {@link DutyList.calendar.EventRecord record} for the event that the cursor exited
             * @param {HTMLNode} el The DOM node that was exited
             */
            /**
             * @event datechange
             * Fires after the start date of the view changes
             * @param {DutyList.calendar.CalendarPanel} this
             * @param {Date} startDate The start date of the view (as explained in {@link #getStartDate}
             * @param {Date} viewStart The first displayed date in the view
             * @param {Date} viewEnd The last displayed date in the view
             */
            /**
             * @event rangeselect
             * Fires after the user drags on the calendar to select a range of dates/times in which to create an event
             * @param {DutyList.calendar.CalendarPanel} this
             * @param {Object} dates An object containing the start (StartDate property) and end (EndDate property) dates selected
             * @param {Function} callback A callback function that MUST be called after the event handling is complete so that
             * the view is properly cleaned up (shim elements are persisted in the view while the user is prompted to handle the
             * range selection). The callback is already created in the proper scope, so it simply needs to be executed as a standard
             * function call (e.g., callback()).
             */
            /**
             * @event eventmove
             * Fires after an event element is dragged by the user and dropped in a new position
             * @param {DutyList.calendar.CalendarPanel} this
             * @param {DutyList.calendar.EventRecord} rec The {@link DutyList.calendar.EventRecord record} for the event that was moved with
             * updated start and end dates
             */
            /**
             * @event initdrag
             * Fires when a drag operation is initiated in the view
             * @param {DutyList.calendar.CalendarPanel} this
             */
            /**
             * @event eventresize
             * Fires after the user drags the resize handle of an event to resize it
             * @param {DutyList.calendar.CalendarPanel} this
             * @param {DutyList.calendar.EventRecord} rec The {@link DutyList.calendar.EventRecord record} for the event that was resized
             * containing the updated start and end dates
             */
            /**
             * @event dayclick
             * Fires after the user clicks within a day/week view container and not on an event element
             * @param {DutyList.calendar.CalendarPanel} this
             * @param {Date} dt The date/time that was clicked on
             * @param {Boolean} allday True if the day clicked on represents an all-day box, else false.
             * @param {Ext.core.Element} el The Element that was clicked on
             */
        });

        this.layout = 'card';
        // do not allow override
        var month = Ext.applyIf({
             xtype: 'monthview',
             title: this.monthText,
             showTodayText: this.showTodayText,
             showTime: this.showTime
         },
        this.monthViewCfg);

        month.id = this.id + '-month';
        month.store = month.store || this.sheduleStore;
        this.initEventRelay(month);
        this.add(month);
    },

    // private
    initEventRelay: function(cfg) {
        cfg.listeners = cfg.listeners || {};
        cfg.listeners.afterrender = {
            fn: function(c) {
                // relay the view events so that app code only has to handle them in one place
                this.relayEvents(c, ['eventsrendered', 'eventclick', 'eventover', 'eventout', 'dayclick',
                'eventmove', 'datechange', 'rangeselect', 'eventdelete', 'eventresize', 'initdrag']);
            },
            scope: this,
            single: true
        };
    },

    // private
    afterRender: function() {
        this.callParent(arguments);
        
        this.body.addCls('x-cal-body');
        
        Ext.defer(function() {
            //this.updateNavState();
            this.fireViewChange();
        }, 10, this);
    },

    // private //TODO:
    //удалено  onLayout  onEventAdd onEventUpdate onEventDelete onEventCancel setActiveView  updateNavState
    // private
    onLayout: function() {
        this.callParent();
        if (!this.navInitComplete) {
            this.navInitComplete = true;
        }
    },
    // private
    fireViewChange: function() {
        if (this.layout && this.layout.getActiveItem) {
            var view = this.layout.getActiveItem();
            if (view && view.getViewBounds) {
                vb = view.getViewBounds();
                var info = {
                    activeDate: view.getDate(),
                    viewStart: vb.start,
                    viewEnd: vb.end
                };
            };
            this.fireEvent('viewchange', this, view, info);
        }
    },

    /**
     * Sets the start date for the currently-active calendar view.
     * @param {Date} dt
     */
    setStartDate: function(dt) {
        this.layout.activeItem.setDate(dt, true);
        this.fireViewChange();
    },

    // private
    onPrevClick: function() {
        this.Date = this.layout.activeItem.movePrev();
        this.fireViewChange();
    },

    // private
    onNextClick: function() {
        this.Date = this.layout.activeItem.moveNext();
        this.fireViewChange();
    }

});
